import React, { useState, useEffect } from 'react'
import * as Utils from './utils'
import Typescript from '../components/hellots/hello'

export default function App(props) {
  const [inputValue, setinputValue] = useState('asas')
  function handleClick(e) {
    import(/* webpackChunkName: 'home' */ './Home').then((i) => {
      console.log(i)
    })
  }

  const handleDebounce = Utils.debounce(function (e) {
    setinputValue(e.target.value)
  }, 300)
  // const handleDebounce = function (e) {
  //     setinputValue(e.target.value)
  // }

  return (
    <div>
      <div className="flex module" onClick={handleClick}>
        测试动态导入组件
      </div>
      <div className="module">
        tsx学习
        <Typescript />
      </div>

      <div className="module">
        <p>写法： 就是把本来的事件回调函数用debounce函数包裹一下就好</p>
        测试防抖 <input defaultValue={inputValue} onChange={handleDebounce} />
        {/* 双向绑定的时候不能异步更改数据，因为当前dom的value被指定固定的值，异步之后获得的target.value还是之前的值 */}
        测试防抖 <input value={inputValue} onChange={handleDebounce} />
      </div>
    </div>
  )
}
